<template>
  <div class="w-full h-full flex">
    <div class="flex-1 flex-center">
      <h1 class="text-3em">vue3 naive UI demo</h1>
    </div>
    <div class="flex-none w-40% bg-#ececec flex-center">
      <div class="login-form min-w-320px bg-#fff br-10px p-4">
        <h1 class="text-center">账号登录</h1>
        <n-form
          ref="form"
          :model="loginData"
          :rules="rules"
          @keyup.stop.prevent.enter="handleLogin"
        >
          <n-form-item path="account">
            <n-input
              v-model:value="loginData.account"
              placeholder="请输入用户名/手机号"
              prefix-icon="el-icon-user"
              clearable
            />
          </n-form-item>
          <n-form-item path="pwd">
            <n-input
              v-model:value="loginData.pwd"
              type="password"
              show-password-on="mousedown"
              placeholder="密码"
              :maxlength="8"
            />
          </n-form-item>
          <n-form-item path="code" v-if="captchaEnabled === 'true'">
            <n-input-group>
              <n-input
                v-model:value="loginData.code"
                placeholder="请输入验证码"
                :maxlength="4"
              />
              <n-input-group-label @click="getCaptcha">
                <img class="w-full h-full" :src="codeImg" alt="验证码" />
              </n-input-group-label>
            </n-input-group>
          </n-form-item>
          <n-button
            type="primary"
            class="w-full"
            :loading="loading"
            @click="handleLogin"
            >登录</n-button
          >
        </n-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { FormItemInst, FormRules } from 'naive-ui';
import { useLoginApi, type LoginForm } from '@/api/login';
import { useLoginStore } from '@/stores/login';
import router from '@/router';

const captchaEnabled = import.meta.env.VITE_GLOB_CAPTCHA;
const loading = ref(false);
const form = ref<FormItemInst>();
const loginData = ref<LoginForm>({
  account: 'admin',
  pwd: '123456',
  code: '',
  timestamp: undefined,
});
const rules = computed<FormRules>(() => {
  return {
    account: [
      { required: true, trigger: ['blur', 'input'], message: '请输入登录账号' },
    ],
    pwd: [
      { required: true, trigger: ['blur', 'input'], message: '请输入密码' },
    ],
    code: [
      { required: true, message: '请输入验证码', trigger: ['blur', 'input'] },
    ],
  };
});
const codeImg = ref('');
const getCaptcha = () => {
  loginData.value.timestamp = Date.now();
  useLoginApi.captcha(loginData.value.timestamp).then((res) => {
    codeImg.value = URL.createObjectURL(res.data as Blob);
  });
};

const { loginAction } = useLoginStore();
const handleLogin = async () => {
  loading.value = true;
  try {
    await form.value?.validate();
    await loginAction(loginData.value, false);
    router.push({ name: '/' });
  } catch (errors) {
    console.log('errors', errors);
    getCaptcha();
  }
  loading.value = false;
};

onBeforeMount(() => {
  if (!codeImg.value) {
    getCaptcha();
  }
});
</script>
<style lang="scss"></style>
